<template>
  <CardDialog v-model:visible="show" width="1000px" title="船舶信息补充">
    <div class="form-content">
      <a-form class="dialog-form" ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7 }">
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <a-form-item label="船舶名称" name="vesselName">
              <a-input style="width: 100%" v-model:value="form.vesselName" placeholder="请输入船舶名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="船舶中文名称" name="vesselLocalName">
              <a-input style="width: 100%" v-model:value="form.vesselLocalName" placeholder="请输入船舶中文名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <a-form-item label="MMSI" name="mmsi">
              <a-input style="width: 100%" v-model:value="form.mmsi" placeholder="请输入MMSI" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="IMO" name="imo">
              <a-input style="width: 100%" v-model:value="form.imo" placeholder="请输入IMO" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <a-form-item label="呼号" name="callSign">
              <a-input style="width: 100%" v-model:value="form.callSign" placeholder="请输入呼号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="吃水" name="draft">
              <a-input style="width: 100%" v-model:value="form.draft" placeholder="请输入吃水" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <a-form-item label="船舶类型" name="vesselType">
              <a-select ref="select" v-model:value="form.vesselType" style="width: 100%" placeholder="请输入船舶类型" disabled>
                <a-select-option v-for="item in shipType" :key="item.value" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发现时间" name="createTime">
              <a-input style="width: 100%" v-model:value="form.createTime" placeholder="请输入发现时间" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <a-form-item label="距离船首" name="toBow">
              <a-input style="width: 100%" v-model:value="form.toBow" placeholder="请输入距离船首" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="距离船尾" name="toStern">
              <a-input style="width: 100%" v-model:value="form.toStern" placeholder="请输入距离船尾" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <a-form-item label="距离左舷" name="toPort">
              <a-input style="width: 100%" v-model:value="form.toPort" placeholder="请输入距离左舷" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="距离右舷" name="toStarboard">
              <a-input style="width: 100%" v-model:value="form.toStarboard" placeholder="请输入距离右舷" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="button-list">
      <a-button class="form-button" type="primary" @click="onSubmit">保存</a-button>
      <a-button class="form-button form-button-cancel" type="primary" @click="onClose">取消</a-button>
      <a-button class="form-button form-button-cancel" type="primary" @click="resetForm">重置</a-button>
    </div>
  </CardDialog>
</template>
<script setup>
  import { reactive, nextTick, ref } from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { smartSentry } from '/@/lib/smart-sentry';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import { api } from '/@/api/plat/ais-static.js';
  import { shipType } from '/@/config/shipType.js';

  const props = defineProps({
    bridgeList: {
      type: Array,
      default: () => [],
    },
  });
  const emits = defineEmits(['onload']);
  let show = ref(false);
  const formRef = ref();
  const formDefault = {
    staticId: undefined,
    radarName: undefined,
    isEnabled: false,
    latitude: undefined,
    longitude: undefined,
    ip: undefined,
    port: undefined,
    maxDistance: undefined,
    distanceScale: undefined,
    northAngle: undefined,
    fieldOfView: undefined,
    radarType: undefined,
    bridgeId: undefined,
    foregroundColor: '#FF0000FF',
    backgroundColor: '#FF0000FF',
  };
  const rules = {
    radarName: [{ required: true, message: '请填写雷达名称' }],
    isEnabled: [{ required: true, message: '请选择是否启用' }],
    latitude: [{ required: true, message: '请填写纬度' }],
    longitude: [{ required: true, message: '请填写经度' }],
    ip: [{ required: true, message: '请填写IP地址' }],
    port: [{ required: true, message: '请填写端口号' }],
    maxDistance: [{ required: true, message: '请填写最大监测距离' }],
    distanceScale: [{ required: true, message: '请填写距离刻度' }],
    northAngle: [{ required: true, message: '请填写正北角' }],
    fieldOfView: [{ required: true, message: '请填写视角' }],
    radarType: [{ required: true, message: '请填写雷达种类' }],
    bridgeId: [{ required: true, message: '请选择所属大桥' }],
  };
  let form = ref({ ...formDefault });

  function open(rowData) {
    form.value = { ...formDefault };
    if (rowData && !_.isEmpty(rowData)) {
      form.value = Object.assign({}, form.value, rowData);
    }
    show.value = true;
  }

  function resetForm() {
    form.value = Object.assign({}, formDefault);
    formRef.value.resetFields();
  }

  function onClose() {
    resetForm();
    show.value = false;
  }

  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save(form.value);
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save(formData) {
    SmartLoading.show();
    try {
      let result = null;
      if (formData.staticId) {
        result = await api.update(formData);
      } else {
        result = await api.add(formData);
      }
      if (result && result.data) {
        message.success('保存成功');
        onClose();
        emits('onload');
      } else {
        message.error('保存失败');
      }
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  @import '/@/assets/style/form.less';
  .form-content {
    height: 60vh;
    padding: 0 0 10px;
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #2f6e90;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
    .form-right {
      padding-right: 5px;
      position: relative;
      > .map-card {
        border: 2px solid #1d77c4;
        border-radius: 3px;
        cursor: pointer;
      }
      .form-right-tips {
        position: absolute;
        z-index: 1;
        top: 2px;
        left: 2px;
        background-color: #333b;
        color: #fff;
        padding: 10px 15px;
        border-radius: 0 0 20px 0;
      }
    }
  }
  .button-list {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .form-button {
      margin: 0 10px;
    }
    .form-button-cancel {
      background-color: #ccc;
      color: #000;
      &:hover {
        background-color: #eee;
      }
    }
  }
</style>
